<!--
 * @Descripttion:账单管理-交班账单
-->
<template>
  <div>
    <div class="handover-content-wrap">
      <!-- 左边盒子 -->
      <div class="left-box" :class="{ fullWidth: !currentHandoverOrder }">
        <div class="left-box-title">交班账单</div>

        <!-- 头部搜索栏 -->
        <div class="search-box-wrap" :class="{ fullWidth: !currentHandoverOrder }">
          <!-- 查询时间 -->
          <div class="betweenTime-box">
            <el-date-picker
              class="date-picker"
              v-model="pageListQuery.betweenTime"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onSearch"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>

          <!-- 输入框 -->
          <div class="search-input-wrap">
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                v-model.trim="pageListQuery.search"
                type="text"
                placeholder="搜索交班人"
                @input="onSearch"
              />
            </div>
          </div>
        </div>

        <!-- 营业账单列表相关组件 -->
        <div
          class="table-wrap"
          :class="{ fullWidth: !currentHandoverOrder }"
          v-loading="tableLoading"
          element-loading-text="加载中..."
        >
          <HandoverTableList
            :table-data="tableData"
            @row-select="handleRowSelect"
            :selected-row="currentHandoverOrder"
          />
        </div>

        <div class="table-total" :class="{ fullWidth: !currentHandoverOrder }">
          <span>共{{ pageListTotal }}条</span>
          <div>
            <Pagination
              v-show="pageListTotal > 0"
              :total="pageListTotal"
              v-model:page="pageListQuery.page"
              v-model:limit="pageListQuery.limit"
              @pagination="getHandoverBillList"
              :pageSizes="[15, 45, 75, 100]"
            />
          </div>
        </div>

        <!-- 表格数据汇总&&按钮组 -->
        <div class="data-summary-box" :class="{ fullWidth: !currentHandoverOrder }">
          <!--  多选框 -->
          <div class="check-box">
            <div class="check-item" v-for="(item, index) in checkboxList" :key="index">
              <el-checkbox v-model="item.checked" @change="checkedClick">
                {{ item.label }}
              </el-checkbox>
            </div>
          </div>
          <div class="sumary-btn-group">
            <el-button
              class="print"
              @click="handleAction(1)"
              :loading="printLoading"
              :disabled="!currentHandoverOrder"
            >
              重新打印交班单
            </el-button>
            <el-button class="cancel" @click="handleAction(2)">返回</el-button>
          </div>
        </div>
      </div>

      <!-- 右边盒子 -->
      <div class="right-box" v-show="currentHandoverOrder">
        <HandoverBillCard
          :selected-handover-order="currentHandoverOrder"
          :select-checked-list="selectCheckedList"
        />
      </div>

      <!--  重新打印交班单的弹窗组件-->
      <HandoverPrintDialog
        v-model="isShowPrintDilag"
        :selected-handover-order="currentHandoverOrder"
        :select-checked-list="selectCheckedList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import HandoverBillCard from './components/HandoverBillCard/Index.vue'
import HandoverTableList from './components/HandoverTableList/Index.vue'
import HandoverPrintDialog from './components/HandoverPrintDialog/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { shiftReportList } from '@/api/desktop'
import { dealAssignDataFunction, debounce } from '@/utils/toolsValidate'

// 多选框列表
const checkboxList = ref([
  { label: '大类销售汇总', value: 1, checked: false },
  { label: '销售类目汇总', value: 2, checked: false },
  { label: '账单明细', value: 3, checked: false },
  { label: '支付方式明细', value: 4, checked: false },
  { label: '实收汇总', value: 5, checked: false },
  { label: '虚收汇总', value: 6, checked: false },
  { label: '台区消费汇总', value: 7, checked: false },
  { label: '充值明细', value: 8, checked: false },
  { label: '挂账明细', value: 9, checked: false },
  { label: '反结账记录', value: 10, checked: false }
])

// 表格数据
const tableData = ref<any[]>([])

// 分页相关参数
const pageListQuery = ref({
  page: 1,
  limit: 15,
  search: '',
  betweenTime: [] as any[]
})

// 分页列表总条数
const pageListTotal = ref(0)

// 当前选中的交班订单
const currentHandoverOrder = ref<any>(null)

// 是否显示重新打印交班单的弹窗组件
const isShowPrintDilag = ref(false)
const printLoading = ref(false)
const tableLoading = ref(false)

// 获取选中的数据
const selectCheckedList = computed(() => {
  return checkboxList.value.filter(data => data.checked)
})

// 获取选中的数据
const checkedClick = () => {
  // 触发重新计算
}

// 搜索挂账订单列表
const onSearch = debounce(() => {
  pageListQuery.value.page = 1
  getHandoverBillList()
}, 500)

// 获取挂账订单列表
const getHandoverBillList = async () => {
  try {
    tableLoading.value = true
    const res = await shiftReportList(pageListQuery.value)
    if (res.status === 200) {
      tableData.value = dealAssignDataFunction([], res?.data?.list?.data)
      pageListTotal.value = dealAssignDataFunction(0, res?.data?.list?.total)
    }
  } catch (error) {
    console.error('获取交班账单列表失败:', error)
  } finally {
    tableLoading.value = false
  }
}

// 处理表格行选择
const handleRowSelect = (row: any) => {
  currentHandoverOrder.value = row
}

// 选中对应的操作选项
const handleAction = (index: number) => {
  if (index === 1) {
    if (!currentHandoverOrder.value) {
      return
    }
    isShowPrintDilag.value = true
  } else {
    history.go(-1)
  }
}

// 初始化获取数据
getHandoverBillList()
</script>

<style scoped lang="scss">
.handover-content-wrap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.left-box {
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: calc(100% - 440px);
  height: calc(100vh - 120px);
  overflow: hidden;

  &.fullWidth {
    width: 100% !important;
  }
}

.left-box-title {
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  height: 88px !important;
  background: #f4f4f4;
  border-radius: 20px 20px 0px 0px;
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box-wrap {
  margin-top: 20px;
  padding: 10px 30px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.fullWidth {
    width: 100% !important;
  }
}

.betweenTime-box {
  :deep(.el-date-editor) {
    min-width: 360px;
  }
}

.search-input-wrap {
  display: flex;
  justify-content: flex-end;
}

.search-input-box {
  width: 280px;
  height: 40px;
  border: 1px solid #d2d2d2;
  border-radius: 25px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.search-icon {
  width: 24px;
  height: 24px;
}

.search-input-box .input {
  border: none;
  outline: none;
  width: 200px;
  font-size: 14px;
  color: #333;
  margin-left: 6px;
}

.table-wrap {
  box-sizing: border-box;
  padding: 20px 30px 0px 30px;
  width: 100%;
  flex: 1;
  overflow: hidden;

  &.fullWidth {
    width: 100% !important;
  }
}

.table-total {
  font-size: 14px;
  color: #333333;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #f0f0f0;

  &.fullWidth {
    width: 100% !important;
  }
}

.data-summary-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 30px;
  box-sizing: border-box;

  &.fullWidth {
    width: 100% !important;
  }

  .check-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 60%;

    .check-item {
      display: flex;
      align-items: center;

      :deep(.el-checkbox) {
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #7c0a03;
          border-color: #7c0a03;
        }

        .el-checkbox__label {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }

  .sumary-btn-group {
    display: flex;
    align-items: center;
    gap: 40px;

    .print,
    .cancel {
      min-width: 140px;
      height: 52px;
      background: #ffffff;
      border: 1px solid #333333;
      border-radius: 12px;
      font-size: 18px;
      color: #333333;
    }
  }
}

.right-box {
  width: 420px;
  height: calc(100vh - 120px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

@media (max-width: 1600px) {
  .left-box {
    width: calc(100% - 420px);
  }
}

@media (max-width: 1400px) {
  .left-box {
    width: 100%;
  }
  .right-box {
    display: none;
  }
}
</style>
